<template>
	<view class="uni-container">
		<uni-forms ref="form" :model="formData" validate-trigger="submit"  label-align="right" :label-width="100" err-show-type="toast">
			<uni-forms-item name="name" label="单位名称" required><uni-easyinput placeholder="单位名称" v-model="formData.name"></uni-easyinput></uni-forms-item>
			<uni-forms-item name="address" label="单位地址"><uni-easyinput placeholder="单位地址" v-model="formData.address" trim="both"></uni-easyinput></uni-forms-item>
			<uni-forms-item name="tel" label="单位电话"><uni-easyinput placeholder="单位电话" v-model="formData.tel" trim="both"></uni-easyinput></uni-forms-item>
			<uni-forms-item name="director" label="负责人"><uni-easyinput placeholder="负责人" v-model="formData.director" trim="both"></uni-easyinput></uni-forms-item>
			<uni-forms-item name="notes" label="备注"><uni-easyinput placeholder="备注" type="textarea" v-model="formData.notes" trim="both"></uni-easyinput></uni-forms-item>
			<view class="uni-button-group"><button type="primary" class="uni-button" @click="submit">提交</button></view>
		</uni-forms>
	</view>
</template>

<script>
import { validator } from '../../js_sdk/validator/unit.js';

const db = uniCloud.database();
const dbCollectionName = 'unit';

function getValidator(fields) {
	let result = {};
	for (let key in validator) {
		if (fields.indexOf(key) > -1) {
			result[key] = validator[key];
		}
	}
	return result;
}

export default {
	data() {
		let formData = {
			name: '',
			address: '',
			tel: '',
			director: '',
			notes: ''
		};
		return {
			formData,
			formOptions: {},
			rules: {
				...getValidator(Object.keys(formData))
			}
		};
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		/**
		 * 验证表单并提交
		 */
		submit() {
			uni.showLoading({
				mask: true
			});
			this.$refs.form
				.validate()
				.then(res => {
					return this.submitForm(res);
				})
				.catch(() => {})
				.finally(() => {
					uni.hideLoading();
				});
		},

		/**
		 * 提交表单
		 */
		submitForm(value) {
			// 使用 clientDB 提交数据
			return db
				.collection(dbCollectionName)
				.add(value)
				.then(res => {
					uni.showToast({
						icon: 'none',
						title: '新增成功'
					});
					this.getOpenerEventChannel().emit('refreshData');
					setTimeout(() => uni.navigateBack(), 500);
				})
				.catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					});
				});
		}
	}
};
</script>

<style>
.uni-container {
	padding: 15px;
}

.uni-input-border,
.uni-textarea-border {
	width: 100%;
	font-size: 14px;
	color: #666;
	border: 1px #e5e5e5 solid;
	border-radius: 5px;
	box-sizing: border-box;
}

.uni-input-border {
	padding: 0 10px;
	height: 35px;
}

.uni-textarea-border {
	padding: 10px;
	height: 80px;
}

.uni-button-group {
	margin-top: 50px;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
}

.uni-button {
	width: 184px;
}
</style>
